Установка скрипта «Автозаполнение электронной почты»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Первый шаг: загрузка изображений на сайт


Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.
Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в созданную папку и загрузите в эту папку все изображения из папки "скрипты".

Второй шаг: установка кода


Перейдите в Панель управления » Управление дизайном » Пользователи: Страница регистрации пользователей и Страница редактирования данных пользователя, а также Форма добавления комментариев (для этого шаблона просто в самому низу разместить код), – перед тегами </body></html> разместите код: 
<script src="/js/awesomplete.js"></script>
<script>
(function($) {
    $ = Awesomplete.$;
    $$ = Awesomplete.$$;
    new Awesomplete($('input[name="email"]'), {
	list: ["@mail.ru", "@yandex.ru", "@ya.ru", "@facebook.com", "@gmail.com", "@gmx.com", "@googlemail.com", "@google.com", "@hotmail.com", "@ro.ru", "@lenta.ru", "@me.com", "@mail.com", "@msn.com", "@live.com", "@rambler.ru", "@bk.ru", "@inbox.ru", "@list.ru"],
	item: function(text, input){
	    var newText = input.slice(0, input.indexOf("@")) + text;
	    return Awesomplete.$.create("li", {
		innerHTML: newText.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"),
		"aria-selected": "false"
	    });
	},
	filter: function(text, input){
	    return RegExp("^" + Awesomplete.$.regExpEscape(input.replace(/^.+?(?=@)/, ''), "i")).test(text);
	}
    });
})(jQuery);	
</script>
Выделенное красным - список зон в почтовых адресах. Вы можете их дополнять либо удалять до запятой. Т.е. чтобы добавить нужно разместить после запятой "@googlemail.com", и чтобы удалить нужно удалить похожий код.
и сохраните изменения.
Перейдите в Панель управления » Управление дизайном » Общие шаблоны: Таблица стилей (CSS), разместите код: 
.visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
div.awesomplete {
    display: inline-block;
    position: relative;
}
div.awesomplete > input {
    display: block;
}
div.awesomplete > ul {
    position: absolute;
    left: 0;
    z-index: 1;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    border-radius: .3em;
    margin: .2em 0 0;
    background: hsla(0,0%,100%,.9);
    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
    text-shadow: none;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
    display: none;
}
@supports (transform: scale(0)) {
    div.awesomplete > ul {
	transition: .3s cubic-bezier(.4,.2,.5,1.4);
	transform-origin: 1.43em -.43em;
    }
    div.awesomplete > ul[hidden],
	div.awesomplete > ul:empty {
	opacity: 0;
	transform: scale(0);
	display: block;
	transition-timing-function: ease;
    }
}
div.awesomplete > ul:before {
    content: "";
    position: absolute;
    top: -.43em;
    left: 1em;
    width: 0; height: 0;
    padding: .4em;
    background: white;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
div.awesomplete > ul > li {
    position: relative;
    padding: .2em .5em;
    cursor: pointer;
}
div.awesomplete > ul > li:hover {
    background: hsl(200, 40%, 80%);
    color: black;
}
div.awesomplete > ul > li[aria-selected="true"] {
    background: hsl(205, 40%, 40%);
    color: white;
}
div.awesomplete mark {
    background: hsl(65, 100%, 50%);
}
div.awesomplete li:hover mark {
    background: hsl(68, 101%, 41%);
}
div.awesomplete li[aria-selected="true"] mark {
    background: hsl(86, 102%, 21%);
    color: inherit;
}
и сохраните изменения.